<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>轮播</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-family: 'Microsoft YaHei', SimHei, SimSun, sans-serif;
            font-size: 12px;
            font-style: normal;
            font-variant: normal;
            font-weight: normal;
            font-stretch: normal;
            line-height: 18px;
            overflow-x: hidden;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: black;
        }
        #waikuang{
            margin: 15px 0 0 15px ;
            width: 560px;
            height: 215px;
            background-color: #fff;
            overflow: hidden;
        }
        #daohang {
            float: left;
            height: 31px;
        }
        #daohang li{
            float: left;
            width: 70px;
            height: 29px;
            line-height: 31px;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
        }
        #daohang li:hover{
            border-bottom: 2px solid #e86656;
            color: #e86656;
        }
        #wenzilunbo{
             position: relative;
             float: left;
             width: 1000%;
             height: 100%;
         }
        #wenzilunbo .article_list {
            float: left;
            width: 560px;
            height: 175px;
            position: relative;
            top: 0;
            left: 0;
        }
        .clear:after {
            overflow: hidden;
            content: "";
            display: block;
            clear: both;
            height: 0;
        }
        #wenzilunbo .article_list li{
            border-bottom: #cececf dotted 1px;
            line-height: 32px;
            height: 32px;
            cursor: pointer;
        }
        #wenzilunbo .article_list li:hover span {
             transform: rotateY(180deg);
             transition: all 0.4s linear 0.05s;
         }
        span{
            float: left;
            margin: 9px 9px 0 0;
            display: block;
            width: 9px;
            height: 15px;
            background: url('img/icon.png') no-repeat;
            background-position:  0 -20px;
            transition: all 0.3s linear 0s;
        }
        em {
            float: right;
            color: #9b9b9b;
            font-style: normal;
            font-weight: normal;
        }
        .diwei{
            color: #e86656;
            border-bottom: 2px solid #e86656;
        }

    </style>
    <script src="../js/jquery-3.1.0.min.js" type="text/javascript">
    </script>
</head>
<body>
    <div id="waikuang">
        <ul id="daohang">
            <li class="diwei">17173</li>
            <li>多玩</li>
            <li>爱玩</li>
            <li>tgbus</li>
            <li>178</li>
            <li>52PK</li>
            <li>游民星空</li>
            <li>u9</li>
        </ul>
        <div id="wenzilunbo" class="clear">
            <div class="article_list">
                <ul>
                    <li><em>09/09</em><span></span><a target="_blank" href="http://jx3.17173.com/content/2016-09-08/20160908104726850_1.shtml">[新闻]  世家风范颜值担当 霸刀校服外观首曝</a></li>
                    <li><em>09/09</em><span></span><a target="_blank" href="http://jx3.17173.com/content/2016-09-08/20160908144817576.shtml">[攻略]  剑网三梦回稻香 重写史篇成就细节详解</a></li>
                    <li><em>09/09</em><span></span><a target="_blank" href="http://jx3.17173.com/content/2016-09-08/20160908144801635_1.shtml">[美图]  飞天小女警萝莉版 可爱的独特画风手绘图</a></li>
                    <li><em>09/09</em><span></span><a target="_blank" href="http://jx3.17173.com/content/2016-09-08/20160908104339206.shtml">[攻略]  冰心DPS最高宏分享 新妆霜降/新妆清涓宏</a></li>
                    <li><em>09/09</em><span></span><a target="_blank" href="http://jx3.17173.com/content/2016-09-08/20160908104300367_1.shtml">[攻略]  分享奶花PVP各段配装 做你的私人定制</a></li>
                </ul>
            </div>
            <div class="article_list" >
                <ul>
                    <li><em>09-12</em><span></span><a href="#" title="《剑网3》喜迎中秋佳节新节日外装首曝" target="_blank">《剑网3》喜迎中秋佳节新节日外装首曝</a></li>
                    <li><em>09-12</em><span></span><a href="#" title="暗弦断羽何所求《剑网3》唐门御姐COS" target="_blank">暗弦断羽何所求《剑网3》唐门御姐COS</a></li>
                    <li><em>09-12</em><span></span><a href="#" title="七周年系列轻功特效披风于9月14日下架" target="_blank">七周年系列轻功特效披风于9月14日下架</a></li>
                    <li><em>09-12</em><span></span><a href="#" title="今日话题 中秋又出新外观准备入手吗？" target="_blank">今日话题 中秋又出新外观准备入手吗？</a></li>
                    <li><em>09-12</em><span></span><a href="#" title="《剑网3》有爱玩家光明手绘同人屏风赏" target="_blank">《剑网3》有爱玩家光明手绘同人屏风赏</a></li>

                </ul>
            </div>
            <div class="article_list" >
                <ul>
                    <li><em>09/06</em><span></span><a href="http://play.163.com/16/0905/16/C07DGG7R00314UFD.html" target="_blank">[攻略]  剑网3玩家经验分享 1-95级快速升级攻略</a></li>
                    <li><em>09/06</em><span></span><a href="http://play.163.com/16/0905/17/C07DU2TE00314UFD.html" target="_blank">[COS]  美到窒息 喵姐美艳COS体会不一样的风格</a></li>
                    <li><em>09/06</em><span></span><a href="http://play.163.com/16/0905/16/C07CS74M00314UFD.html" target="_blank">[攻略]  梦回稻香NPC好感度怎么看？怎样提升？</a></li>
                    <li><em>09/06</em><span></span><a href="http://play.163.com/16/0905/16/C07CV7DF00314UFD.html" target="_blank">[资讯]  霸刀重要人物一览 门派关键NPC介绍</a></li>
                    <li><em>09/06</em><span></span><a href="http://play.163.com/16/0905/17/C07DNMO500314UFD.html" target="_blank">[COS]  圣火昭昭极乐光明 绝美陆烟儿COS图欣赏</a></li>
                </ul>
            </div>
            <div class="article_list" >
                <ul>
                    <li><em>09/08</em><span></span><a href="http://jx.tgbus.com/jietu/bqb/201609/20160908144253.shtml" target=_blank>[表情包]  萝莉九脸懵逼无水印表情包 可以单个右键</a></li>
                    <li><em>09/08</em><span></span><a href="http://jx.tgbus.com/jiaoliu/yxzb/201609/20160908143917.shtml" target=_blank>[周报]  十二门派周边服饰设计 你最喜欢哪个门派</a></li>
                    <li><em>09/08</em><span></span><a href="http://jx.tgbus.com/zonghe/201609/20160908142059.shtml" target=_blank>[抓马]  新手向抓马教程附带抓马宏 获取心意宝马</a></li>
                    <li><em>09/08</em><span></span><a href="http://jx.tgbus.com/xinwen/201609/20160908120025.shtml" target=_blank>[霸刀]  剑网3霸刀校服外观首曝 世家风范颜值担当</a></li>
                    <li><em>09/08</em><span></span><a href="http://jx.tgbus.com/xinwen/201609/20160908113603.shtml" target=_blank>[公告]  9月8日例行维护公告 中秋宝箱福利发放完毕</a></li>

                </ul>
            </div>
            <div class="article_list" >
                <ul>
                    <li><em>09/12</em><span></span><a href="http://jx3.178.com/201609/267658846164.html" target="_blank">  剑网3“玩家回忆” 一路见证七年气纯路</a></li>
                    <li><em>09/12</em><span></span><a href="http://jx3.178.com/201609/267653280151.html" target="_blank">  李二汪与小邋遢 新·唐八狗的虐丐帮日常（二）</a></li>
                    <li><em>09/12</em><span></span><a href="http://jx3.178.com/201609/267652720500.html" target="_blank">  全门派萝莉手绘分享 萌死萝莉控壁纸头像皆宜</a></li>
                    <li><em>09/12</em><span></span><a href="http://jx3.178.com/201609/267651789620.html" target="_blank">  万花技能手写美图见字如见技 一入万花一世万花</a></li>
                    <li><em>09/12</em><span></span><a href="http://jx3.178.com/201609/267647675675.html" target="_blank">  剑网3全门派怨妇系列小表情 你不爱我了？</a></li>

                </ul>
            </div>
            <div class="article_list" >
                <ul>
                    <li><em>09/12</em><span></span><cite class="n1508"><a href="http://jx3.52pk.com/xinwen/" target="_blank" >
                    </a></cite><a href="http://jx3.52pk.com/xinwen/6808652.shtml" target="_blank" title="<font color='#FF0000'>剑网3中秋盛典14日开启 全新外装视频首曝</font>"><font color='#FF0000'>剑网3中秋盛典14日开启 全新外装视频首曝</font></a></li>
                    <li><em>09/12</em><span></span><cite class="n1799"><a href="http://jx3.52pk.com/gonglue/" target="_blank" >
                    </a></cite><a href="http://jx3.52pk.com/gonglue/6808622.shtml" target="_blank" title="剑网3风骨霸刀剧情赏 柳五爷剧情曝光">剑网3风骨霸刀剧情赏 柳五爷剧情曝光</a></li>
                    <li><em>09/12</em><span></span><cite class="n1508"><a href="http://jx3.52pk.com/xinwen/" target="_blank" >
                    </a></cite><a href="http://jx3.52pk.com/xinwen/6808444.shtml" target="_blank" title="9月12日例行维护公告 七周年庆典活动结束">9月12日例行维护公告 七周年庆典活动结束</a></li>
                    <li><em>09/09</em><span></span><cite class="n1618"><a href="http://jx3.52pk.com/pkhd/" target="_blank" >
                    </a></cite><a href="http://jx3.52pk.com/pkhd/6807188.shtml" target="_blank" title="PVP剑纯新手指导 你需要知道的基本设置">PVP剑纯新手指导 你需要知道的基本设置</a></li>
                    <li><em>09/09</em><span></span><cite class="n1508"><a href="http://jx3.52pk.com/xinwen/" target="_blank" >
                    </a></cite><a href="http://jx3.52pk.com/xinwen/6807050.shtml" target="_blank" title="<font color='#FF0000'>剑网3风骨霸刀19日首测 全新团队秘境曝光</font>"><font color='#FF0000'>剑网3风骨霸刀19日首测 全新团队秘境曝光</font></a></li>

                </ul>
            </div>
            <div class="article_list" >
                <ul>
                    <li><em>09/09</em><span></span><a href="http://ol.gamersky.com/news/201609/806335.shtml" target="_blank">[攻略]  《剑网3》风骨霸刀19日首测 全新团队秘境来袭</a></li>
                    <li><em>09/09</em><span></span><a href="http://ol.gamersky.com/z/jx3/201609/806159.shtml" target="_blank">[攻略]  世家风范颜值担当 《剑网3》霸刀校服外观首曝</a></li>
                    <li><em>09/09</em><span></span><a href="http://ol.gamersky.com/z/jx3/201609/806182.shtml" target="_blank">[攻略]  《剑网3》飞天小女警萝莉版 独特画风手绘图</a></li>
                    <li><em>09/07</em><span></span><a href="http://ol.gamersky.com/z/jx3/201609/806834.shtml" target="_blank">[攻略]  《剑网3》梦回稻香官方结局任务流程指南</a></li>
                    <li><em>09/09</em><span></span><a href="http://ol.gamersky.com/z/jx3/201609/806111.shtml" target="_blank">[攻略]  《剑网3》梦回稻香之重写史篇成就获取流程</a></li>

                </ul>
            </div>
            <div class="article_list">
                <ul>
                    <li><em>09-09</em><span></span><a href="http://jx3.uuu9.com/201609/1349820.shtml" title="《剑网3》“风骨霸刀”19日首测 全新团队秘境来袭" target="_blank">《剑网3》“风骨霸刀”19日首测 全新团队秘境来</a></li>

                    <li><em>09-08</em><span></span><a href="http://jx3.uuu9.com/201609/1349509.shtml" title="剑网3江湖百晓生 账号被盗处理解决方法" target="_blank">剑网3江湖百晓生 账号被盗处理解决方法</a></li>

                    <li><em>09-08</em><span></span><a href="http://jx3.uuu9.com/201609/1349508.shtml" title="剑网三七周年红发 萝莉款实装反图参考" target="_blank">剑网三七周年红发 萝莉款实装反图参考</a></li>

                    <li><em>09-08</em><span></span><a href="http://jx3.uuu9.com/201609/1349502.shtml" title="剑网3心得 写给刚刚踏进JJC的奶秀同门" target="_blank">剑网3心得 写给刚刚踏进JJC的奶秀同门</a></li>

                    <li><em>09-03</em><span></span><a href="http://jx3.uuu9.com/201609/1348350.shtml" title="剑网3玩家实力分析 霸刀的战斗姿态" target="_blank">剑网3玩家实力分析 霸刀的战斗姿态</a></li>

                </ul>
            </div>
            <div class="article_list">
                <ul>
                    <li><em>09/09</em><span></span><a target="_blank" href="http://jx3.17173.com/content/2016-09-08/20160908104726850_1.shtml">[新闻]  世家风范颜值担当 霸刀校服外观首曝</a></li>
                    <li><em>09/09</em><span></span><a target="_blank" href="http://jx3.17173.com/content/2016-09-08/20160908144817576.shtml">[攻略]  剑网三梦回稻香 重写史篇成就细节详解</a></li>
                    <li><em>09/09</em><span></span><a target="_blank" href="http://jx3.17173.com/content/2016-09-08/20160908144801635_1.shtml">[美图]  飞天小女警萝莉版 可爱的独特画风手绘图</a></li>
                    <li><em>09/09</em><span></span><a target="_blank" href="http://jx3.17173.com/content/2016-09-08/20160908104339206.shtml">[攻略]  冰心DPS最高宏分享 新妆霜降/新妆清涓宏</a></li>
                    <li><em>09/09</em><span></span><a target="_blank" href="http://jx3.17173.com/content/2016-09-08/20160908104300367_1.shtml">[攻略]  分享奶花PVP各段配装 做你的私人定制</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var main = document.getElementById('waikuang');
        var imges = document.getElementById('wenzilunbo');
        var spanlist = document.getElementById('daohang').getElementsByTagName('li');
        var time;
        var clickFlag=true;//设置左右切换标记位防止连续按,让连续按得效果同按一下的效果一样
        var index = 0;      //当图片滑动时底下按钮的显示
        var Distance=main.offsetWidth;//获取每张图片宽度


        function clear(){
            for(var i=0;i<spanlist.length;i++){
                spanlist[i].className="";
            }
        }
        debugger
        function yidong(){
            var start=imges.offsetLeft;//获取移动块当前的left的开始坐标
            var end=index*Distance*(-1);
            console.log(end);
            var change=end-start;
            var timer;//用计时器为图片添加动画效果
            var t=0;
            var maxT=30;


            clear();
            if(index==spanlist.length){
                spanlist[0].className="diwei";//当轮播第一轮结束时按钮1的位置出现效果
            }else{
                spanlist[index].className="diwei";
            }

            timer=setInterval(function(){
                /* debugger*/
                t++;
                if(t>=maxT){//当图片到达终点停止计时器
                    clearInterval(timer);
                    clickFlag=true;//当图片到达终点才能切换
                }
                imges.style.left=change/maxT*t+start+"px";//每个17毫秒让块移动
                if(index==spanlist.length&&t>=maxT){
                    imges.style.left=0;
                    index=0; //当图片到最后一张时把它瞬间切换回第一张，由于都同一张图片不会影响效果
                }
            },20);
        }
        //自动轮播
        time=setInterval(forward,4000);
        function forward(){
            index++;
            if(index>spanlist.length){
                index = 0;
            }
            yidong();
        }
        //按钮控制图片变动
         console.log(spanlist)
        for(var i=0;i<spanlist.length;i++) {
            spanlist[i].id = i;
            spanlist[i].onclick = function () {
                index = this.id;
                yidong();
            }
        }

            //鼠标悬浮图片停止
            imges.onmousemove = function () {
                clearInterval(time);
            }
            imges.onmouseout = function () {
                time = setInterval(forward, 4000);
            }

    </script>
</body>
</html>